/* ======================================================================
	
	common.js

	★★★ TIP : 어떤 페이지를 만들더라도 무조건 불러와야 하는 공통 스크립트이다.

====================================================================== */

/* Distinction of mobile or desktop
★★★ TIP : 모바일과 데스크탑을 구별하는 스크립트를 미리 선언.
계속 늘어나는 모바일 기기를 일일이 구별하기 힘드므로 차라리 데스크탑인지를 먼저 구별하고 '그 외 나머지'로 처리.
아래의 filter 부분에 '|ipad' ← 이렇게 추가하면 아이패드도 데스크탑으로 분류할 수 있음.
---------------------------------------------------------------------- */

function isMobile(){
	var filter = "win16|win32|win64|mac|macintel";
	if( navigator.platform  ){
		if( filter.indexOf(navigator.platform.toLowerCase())<0 ){
			return true;
		}else{
			return false;
		}
	}
}


/* ======================================================================

	★★★ TIP : 모바일과 데스크탑 구분
	모바일 기기(터치 디바이스)에서는 마우스오버가 불가능하므로 마우스오버를 클릭 동작으로 자동 전환.
	당연히 데스크탑에서는 일반적인 마우스오버가 가능하게 함.
	전역 js 폴더에 있는 'jquery.ui.touch-punch.js'가 'jQuery UI'동작을 터치 전용으로 바꿔주는 역할.

	- mousedown : 디스플레이를 손가락으로 누르고 있는 동안(터치).
	- mouseup : 디스플레이에서 손가락을 떼는 순간.
	- mouseover : 터치 디바이스에서는 소용이 없으며 mousedown과 같은 역할.
	- mouseout : 역시 터치 디바이스에서는 소용이 없으며 mouseup과 같은 역할.
	- click : mousedown과 mouseup을 동시에 한 것(눌렀다 떼기)과 같은 역할.

====================================================================== */

$(function(){
	if(isMobile()){ //■ For Mobile ■

		/* PIUON Logo Show/Hide
		★★★ TIP : 모바일의 좁은 화면에서는 퓨온 로고의 심볼(.logo_piuon2)만 보이도록 토글.
		---------------------------------------------------------------------- */
		$('.logo_piuon1, .logo_piuon2').toggle(); //Many toggles


		/* Button for Show/Hide (Setting panel)
		---------------------------------------------------------------------- */
		$('.sp_open_h').click(function(){ //Press to setting panel open button
			$('.sp_open_h, .sp_close_h, .setting_wrapper_head').toggle(); //Many toggles
			$('.setting_wrapper').css({'z-index':'98'}); //Setting panel z-index, under top bar
			$('.setting_wrapper').animate({'left':'0'}); //Setting panel open
		});
		$('.sp_close_h').click(function(){ //Press to setting panel close button
			$('.sp_close_h, .sp_open_h').toggle(); //Many toggles
			$('.setting_wrapper').animate({'left':'-120%'}); //Setting panel close
		});

	} else { //■ For Desktop ■

		/* Button for Show/Hide (Setting panel)
		---------------------------------------------------------------------- */
		$('.sp_open_h').click(function(){ //Press to setting panel open button
			$('.sp_open_h, .sp_close').toggle(); //Many toggles
			$('.setting_wrapper').animate({'left':'0'}); //Setting panel open
		});
		$('.sp_close').click(function(){ //Press to setting panel close button
			$('.sp_close, .sp_open_h').toggle(); //Many toggles
			$('.setting_wrapper').animate({'left':'-120%'}); //'Setting panel' close
		});


		/* Tool tip (jQuery UI)
		---------------------------------------------------------------------- */
		$(document).tooltip({
			position: {
				my: "center bottom-4",
				at: "center top",
				/*
				using: function(position, feedback) {
					$(this).css(position);
					$("<div>")
					.addClass("arrow")
					.addClass(feedback.vertical)
					.addClass(feedback.horizontal)
					.appendTo(this);
				}
				*/
			}
		});


		/* Get size value of browser
		---------------------------------------------------------------------- */
		function jqUpdateSize(){
			//Get the dimensions of the viewport
			var width = $(window).width();
			var height = $(window).height();

			$('.vp_width').html(width);
			$('.vp_height').html(height);
		};
		$(document).ready(jqUpdateSize); //When the page first loads
		$(window).resize(jqUpdateSize); //When the browser changes size

	}



});